<template>
  <div class="component">
    <van-card v-for="(item_v, item_k) in dataList" :key="item_k" :thumb="item_v.image" :title="item_v.name" :desc="item_v.excerpt" :tag="item_v.label" :num="item_v.stock" :price="item_v.price" :origin-price="item_v.origin_price"></van-card>
  </div>
</template>

<script>
  import {VueExtend} from 'godspen-lib'
  // 引入vant卡片组件
  import { Card } from 'vant'

  export default {
    mixins: [VueExtend.mixin],
    name: 'ProductList',
    label: process.env.LABEL,
    style: process.env.STYLE,
    stack: null, // 是否是堆叠模式 ，false：孩子元素会按楼层一个个向下排布， true: 孩子元素绝对定位，随意放置位置
    childLimit: 9999,  // 孩子元素最大限制数
    leaf: true, // 是否是叶子节点，为true的时候该节点下面不能添加节点
    components: {
      [Card.name]: Card
    },
    props: {
      // 数据来源
      dataFrom: {
        type: String,
        default: 'server',
        editor: {
          label: '数据来源',
          desc: '列表数据来源，支持本地配置及服务端接口',
          type: 'enum',
          defaultList: {
            'local': '本地配置',
            'server': '远程接口'
          }
        }
      },
      // 本地列表数据
      localList: {
        type: Array,
        default () {
          return [{
            'image': '',
            'name': '',
            'excerpt': '',
            'label': '',
            'stock': '',
            'price': '',
            'origin_price': ''
          }]
        },
        editor: {
          work () {
            return this.dataFrom == 'local'
          },
          type: 'array',
          label: '数据列表',
          desc: '本地数据列表'
        }
      },
      // 服务端接口
      dataApi: {
        type: String,
        default: '',
        editor: {
          work () {
            return this.dataFrom == 'server'
          },
          type: 'input',
          label: '数据接口',
          desc: '数据接口地址'
        }
      },
      // 数据映射
      dataMap: {
        type: Object,
        default () {
          return {
            'code': {
              'name': '状态码',
              'data': ''
            },
            'msg': {
              'name': ''
            }
          }
        },
        editor: {
          work () {
            return this.dataFrom == 'server'
          },
          type: 'object',
          label: '数据映射',
          desc: '数据映射关系'
        }
      },
    },
    data () {
      return {
        serverList: {
          page: 0,
          items: []
        }
      }
    },
    computed: {
      dataList () {
        // 本地数据处理
        if (this.dataFrom == 'local') {
          return this.localList
        }
        // 服务端数据
        if (this.dataFrom == 'server') {
          return []
        }
      }
    },
    editorMethods: {
    },
    methods: {
      // 获取数据列表
      dataListFunc (page, search) {
        let that = this
        page = page || 1
        search = search || {}
        that.$options.$lib.Server.fetch(that.dataApi, {
          method: 'GET',
        }).then(function (resource) {
          return resource.json()
        }).then(function (response) {
          console.log('请求结果：', response)
        })
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" type="text/stylus" scoped>
  .component {
    width: 100%;
    height: 100%;
  }
</style>
